<template>
	<div class="userBg">
		<div class="banner">
			<image src="https://www.baixuemianshi.com/zhuanti/tiku/images/banner_moni.png" mode="widthFix"></image>
		</div>
		<div class="container">
			<div class="userinfoBox">
				<h3>{{userinfo.name}}</h3>
				<p>班级：{{ userinfo.banji }}</p>
				<p>中班老师：{{ userinfo.zbls }}</p>
				<p>小班老师：{{ userinfo.xbls }}</p>
				<p>提交老师：{{ myInfo.student }}</p>
			</div>
			
			<div class="pingfenBox">
				<div class="item">
					<div class="label">选择模拟期数</div>
					<ul>
						<li v-for="(item,index) in filterMoni" :key="index" @click="selectQs = item" :class="selectQs == item ? 'cur' : ''">{{item}}</li>
					</ul>
				</div>
				<div class="item" v-for="(item,index) in formInfo" :key="index">
					<div class="subTitle" v-if="item.subTitle"><span>{{item.subTitle}}</span></div>
					<div class="label">{{ item.title }}</div>
					<template v-if="item.type == 'options'">
						<ul>
							<li v-for="(op,j) in item.options" @click="changeSelect(item,index,op)" :key="j" :class="op == item.answer ? 'cur' : ''">{{ op }}</li>
						</ul>
					</template>
					<template v-if="item.type == 'selects'">
						<ul>
							<li v-for="(op,j) in item.options" @click="changeSelect(item,index,op)" :key="j" :class="op == item.answer ? 'cur' : ''">{{ op }}</li>
						</ul>
					</template>
					<template v-if="item.type == 'textarea'">
						<div class="inp">
							<u--textarea v-model="item.answer" :placeholder="'请输入' + item.title" maxlength="-1"></u--textarea>
						</div>
					</template>
					<template v-if="item.type == 'number'">
						<div class="inp">
							<u--input :placeholder="'请输入' + item.title" border="surround" v-model="item.answer" type="digit"></u--input>
						</div>
					</template>
					<template v-if="item.type == 'question'">
						<div class="inp">
							<u--input :placeholder="'请输入' + item.title" border="surround" v-model="item.answer" type="text"></u--input>
						</div>
					</template>
					<div class="intro" v-if="item.intro">{{item.intro}}</div>
				</div>
				<div class="item">
					<u-button type="error" text="提交评价" @click="subPj"></u-button>
				</div>
			</div>
		</div>
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
		<canvas canvas-id="waterMark" class="waterMark" style="width: 100vw; height: 100vh;"></canvas>
		<image :src="waterMarkUrl" class="waterMark-bg" style="width: 100vw; height: 100vh;"></image>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				userid:"",
				userinfo:"",
				banjiInfo:"",
				scores:['A','B','C','D'],
				pjScore:"",
				pjResult:"",
				myInfo:"",
				searchLoading:true,
				
				formInfo:[],
				moniQs:[],
				selectQs:"",
				
				time:""
			}
		},
		onLoad(options) {
			this.userid = options.id
			this.getuserInfo()
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
			filterMoni(){
				let that = this
				return this.moniQs.filter(item => item.indexOf(that.userinfo.banxing) != -1)
			}
		},
		onShow() {
			
		},
		onHide() {
			
		},
		created() {
			let that = this;
			that.time = that.getHour()
			
		},
		mounted() {
			let that = this 
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			
			getuserInfo(){
				let that = this
				db.collection('24sk_bjxx').doc(that.userid).get({
					success: res =>{
						that.userinfo = res.data
						console.log(that.userinfo.banxing,'that.userinfo.banxing')
						that.getMyinfo()
					}
				})
			},
			getMyinfo(){
				let that = this
				db.collection('nbhd_tiku_students').where({phone: that.userphone}).get({
					success: res => {
						that.myInfo = res.data[0]
						that.getFormInfo()
					}
				})
			},
			getFormInfo(){
				let that = this
				db.collection('24sk_pingjia_form').doc('3fa9b3126615fd9e06940ace74d919fb').get({
					success: res => {
						that.formInfo = res.data.formInfo
						that.getMoniQs()
					}
				})
			},
			getMoniQs(){
				let that = this
				db.collection('24sk_pingjia_form').doc('2da151836619cc2006ffc21d54e683fb').get({
					success: res => {
						that.moniQs = res.data.moniQs
						that.searchLoading = false
					}
				})
			},
			changeSelect(item,index,op){
				let that = this
				that.formInfo[index].answer = op
			},
			subPj(){
				let that = this
				if(!that.selectQs){
					uni.showToast({
						title:"请选择期数",
						icon:"error"
					})
					return
				}
				that.searchLoading = true
				db.collection('24sk_pingjia').add({
					data:{
						userid: that.userid,
						student:that.userinfo.name,
						banji:that.userinfo.banji,
						zbls: that.userinfo.zbls,
						xbls: that.userinfo.xbls,
						pjTeacher: that.myInfo.student,
						formInfo: that.formInfo,
						date: that.getDate(),
						time: that.time,
						moni: that.selectQs
					},
					success: res => {
						uni.showToast({
							title:"提交成功！",
							icon:"success"
						})
						that.searchLoading = false
					},
					fail:req => {
						that.searchLoading = false
						uni.showModal({
							title: "您已评价，确认更新？",
							success(res) {
								if (res.confirm) {  
									that.searchLoading = true
									that.updatePj()
								} else if (res.cancel) {  
									return 
								}  
							}
						})
					}
				})
			},
			updatePj(){
				let that = this
				db.collection('24sk_pingjia').where({
					userid: that.userid,
					time: that.time
				}).update({
					data:{
						userid: that.userid,
						student:that.userinfo.name,
						banji:that.userinfo.banji,
						zbls: that.userinfo.zbls,
						xbls: that.userinfo.xbls,
						pjTeacher: that.myInfo.student,
						formInfo: that.formInfo,
						date: that.getDate(),
						moni: that.selectQs
					},
					success: res => {
						uni.showToast({
							title:"提交成功！",
							icon:"success"
						})
						that.searchLoading = false
					},
					fail:req => {
						that.searchLoading = false
					}
				})
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let sec = day.getSeconds().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu + ':' + sec
				return time
			},
			getDate(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d
				return time
			},
			getHour(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let sec = day.getSeconds().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour
				return time
			}
			
			
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>